/*Font-face of ttf format doesn't serve for IE 6-8 (only eot format). 
 To solve it: 

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot');  IE 5-8  
  src: local('☺'),              sneakily trick IE 
        url('tagesschrift.woff') format('woff'),     FF 3.6, Chrome 5, IE9 
        url('tagesschrift.ttf') format('truetype'),  Opera, Safari 
        url('tagesschrift.svg#font') format('svg');  iOS 
}*/

/* Header */
#banner {
    margin: 0 auto;
    padding: 2.5em 0 0 0;
}
 
/* Banner */
#banner h1 {font-size: 3.571em; line-height: .6;}

#banner h1 a:link, #banner h1 a:visited {
    color: #f89f4a;
    display: block;
    font-weight: bold;
    margin: 0 0 .6em .2em;
    text-decoration: none;
    width: 427px;
    clear:both;
}

#banner h1 a:link strong, #banner h1 a:visited strong{color: #000305;}

#banner h1 a:hover, #banner h1 a:active {
        background: none;
        color: #f89f4a;
        text-shadow: none;
}

#banner figure#logo-html5 {display: block; float: right;}
#banner figure#logo-site {display: block; float: left; margin-bottom: 0.5em;}
#banner p {float:right; margin: -2em 1em 0 0; }
#banner h1 strong {font-size: 0.4em; font-weight: bolder; font-family: 'Revalia', cursive; color: #f89f4a;}

/* Main Nav */
#banner nav {
    clear:both;
    background: #000305; /*Black*/
    font-size: 1.143em;
    height: 40px;
    line-height: 30px;
    margin: 0 auto 2em auto;
    padding: 0;
    text-align: center;
    width: 800px;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
#banner nav li {float: left; display: inline; margin: 0;}

#banner nav a:link, #banner nav a:visited {
    color: #fff;
    display: inline-block;
    height: 30px;
    padding: 5px 1.5em;
    text-decoration: none;
}
#banner nav a:hover, #banner nav a:active,
#banner nav .active a:link, #banner nav .active a:visited {
    background: #f89f4a; /*Orange*/
    color: #fff; /*White*/
    
    /*You might as well notice the use of !important. This is basically to 
     override the default styles (text-shadow) without complex specificity selectors*/
    text-shadow: none !important;
}

/*HTML5 Rounded corners*/
#banner nav li:first-child a {
    border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;

    border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}

#banner nav li:last-child a {
    border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;

    border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

#banner nav li:last-child {float:right; font-size: 0.8em;}